<template>
  <div class="app-container">
    <div class="main-class" align-center>
      <el-steps :active="active">
        <el-step title="填写" description="请填写相关信息"></el-step>
        <el-step title="确认" description="确认信息无误"></el-step>
        <el-step title="完成" description="完成健康打卡"></el-step>
      </el-steps>
      <div class="content">
        <div v-show="active === 1" style="text-align: center">
          <el-form ref="form" :model="form" :rules="rules" style="display: inline-block">
            <el-form-item label="1. 目前的健康状况：" prop="healthType">
              <el-radio-group v-model="form.healthType">
                <el-radio :label=0><span>正常</span></el-radio>
                <el-radio :label=1><span>异常</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="2. 当前体温：" prop="temperature">
              <el-input v-model="form.temperature" placeholder="请输入当前体温" clearable />
            </el-form-item>
            <el-form-item label="3. 风险地区停留：" prop="middleHigh">
              <el-radio-group v-model="form.middleHigh">
                <el-radio :label=0><span>低风险</span></el-radio>
                <el-radio :label=1><span>中风险</span></el-radio>
                <el-radio :label=2><span>高风险</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="4. 是否接触疑似或者确诊的新冠病毒肺炎患者患者：" prop="diagnosis" style="width: 460px">
              <el-radio-group v-model="form.diagnosis">
                <el-radio :label=0><span>否</span></el-radio>
                <el-radio :label=1><span>是</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="5. 近14日是否有境外（包括港澳台）的旅居史：" prop="returnInfo">
              <el-radio-group v-model="form.returnInfo">
                <el-radio :label=0><span>否</span></el-radio>
                <el-radio :label=1><span>是</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="6. 请选择打卡时所在的位置信息：" prop="address">
              <el-cascader ref="ownArea" @change="selectArea" :props="{value:'label', label: 'label', children: 'children'}" :options="arercity" v-model="form.address"
                           props.expandTrigger="hover" clearable placeholder="请选择地区位置"></el-cascader>

            </el-form-item>
          </el-form>
        </div>
        <div v-show="active === 2" style="text-align: center">
          <el-form ref="form" :model="form" :rules="rules" style="display: inline-block">
            <el-form-item label="1. 目前的健康状况：" prop="healthType">
              <el-radio-group v-model="form.healthType" disabled>
                <el-radio :label=0><span>正常</span></el-radio>
                <el-radio :label=1><span>异常</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="2. 当前体温：" prop="temperature">
              <el-input v-model="form.temperature" placeholder="请输入当前体温" clearable disabled />
            </el-form-item>
            <el-form-item label="3. 风险地区停留：" prop="middleHigh">
              <el-radio-group v-model="form.middleHigh" disabled>
                <el-radio :label=0><span>低风险</span></el-radio>
                <el-radio :label=1><span>中风险</span></el-radio>
                <el-radio :label=2><span>高风险</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="4. 是否接触疑似或者确诊的新冠病毒肺炎患者患者：" prop="diagnosis" style="width: 460px">
              <el-radio-group v-model="form.diagnosis" disabled>
                <el-radio :label=0><span>否</span></el-radio>
                <el-radio :label=1><span>是</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="5. 近14日是否有境外（包括港澳台）的旅居史：" prop="returnInfo">
              <el-radio-group v-model="form.returnInfo" disabled>
                <el-radio :label=0><span>否</span></el-radio>
                <el-radio :label=1><span>是</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="6. 请选择打卡时所在的位置信息：" prop="address">
              <el-cascader ref="ownArea" @change="selectArea" disabled :props="{value:'label', label: 'label', children: 'children'}" :options="arercity" v-model="form.address"
                           props.expandTrigger="hover" clearable placeholder="请选择地区位置"></el-cascader>

            </el-form-item>
          </el-form>
        </div>
        <div v-show="active === 3">
          <el-result v-if="this.code == 200" icon="success" title="打卡成功" subTitle="请根据提示进行操作">
          </el-result>
          <el-result v-else icon="error" title="打卡失败" subTitle="请根据提示进行操作">
          </el-result>
        </div>
      </div>
      <div class="group">
        <el-button style="margin-top: 12px;" v-show="active > 1 && active < 3" @click="before">上一步</el-button>
        <el-button style="margin-top: 12px;" v-show="active < 2" type="primary" @click="next">下一步</el-button>
        <el-button style="margin-top: 12px;" v-show="active === 2" type="primary" @click="submitForm">提交</el-button>
        <el-button style="margin-top: 12px;" v-show="active === 3" type="primary" @click="addTag">查看打卡记录</el-button>
      </div>



    </div>
  </div>

</template>

<script>
  import {  addHealthclock} from "@/api/health/healthclock";
  import areaDict from "@/plugins/area"

  export default {
    name: "Healthclock",
    data() {
      let validateInteger = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("体温信息不能为空"));
        } else if (parseInt(value) > 50 || parseInt(value) <= 35) {
          return callback(new Error(`请输入正常体温范围的值`));
        } else {
          return callback()
        }
      };
      return {
        active: 1,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 打卡信息表格数据
        healthclockList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        arercity: areaDict,
        code: '',
        // 表单参数
        form: {
          healthType: 0,
          temperature: undefined,
          middleHigh: 0,
          diagnosis: 0,
          returnInfo: 0,
          address: [],
          username: undefined,
          deptId: undefined
        },
        // 表单校验
        rules: {
          healthType: [
            { required: true, message: "健康状况不能为空", trigger: "blur" }
          ],
          temperature: [
            { required: true, message: "打卡信息不能为空", trigger: "blur" },
            { required: true, validator: validateInteger, trigger: "blur" }
          ],
          middleHigh: [
            { required: true, message: "健康信息不能为空", trigger: "blur" }
          ],
          diagnosis: [
            { required: true, message: "健康信息不能为空", trigger: "blur" }
          ],
          returnInfo: [
            { required: true, message: "健康信息不能为空", trigger: "blur" }
          ],
          address: [
            { required: true, message: "打卡地址不能为空", trigger: "blur" }
          ]
        },

      };
    },
    methods: {
      //下一步
      next() {
        this.$refs.form.validate(valid => {
          if (valid){
            if (this.active < 3){
              this.active++
              if(this.active === 2){
                this.$modal.msg("请确认填写信息无误");
              }
            }
          }else {
            this.$modal.error('请正确输入打卡信息！');
            return false
          }
        })
      },
      //上一步
      before(){
        if (this.active > 1){
          this.active--
        }
      },
      //查看打卡信息
      addTag() {
        this.$router.push('/healthy/healthclockinfo')
      },
      //地址
      selectArea () {
        this.$refs.ownArea.dropDownVisible = false
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (Array.isArray(this.form.address)){
              this.form.address = this.form.address.join("-")
            }
              addHealthclock(this.form).then(response => {
                //console.log(response)
                //console.log(response.code)
                this.code = response.code;
                this.$modal.msgSuccess("打卡成功");
                this.open = false;
                this.active = 3
              });
          }
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .group{
    text-align: center;
  }
  .content{
    margin: 25px auto;
  }
  .el-form-item {
    margin-bottom: 3px !important;
  }
  // 级联下拉框单选 文字选中样式
  .selectArea {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
    }
    .is-disabled {
      cursor: not-allowed;
    }
    .el-radio__input {
      visibility: hidden;
    }
  }
</style>
